<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <style type="text/css">
        body{margin:0;padding:0}
        .modal_content{width:500px;margin:50px auto 0;padding:30px;display:flex;justify-content:center;flex-direction:column;box-sizing:border-box;padding:30px;border:1px solid #ddd}
        .modal_content>div{margin-bottom:20px}
        .modal_content>h5:first-child{margin:30px 0;font-size: 18px;color: #d6061c;font-weight: bold;}
        #dialog label{color:#666}
        #phone1{display:block;width:100%;height:70px;background:0 0;padding-top:30px;border:0;outline:0;margin-top:-30px;font-size:16px;border-bottom:1px solid rgba(0,0,0,.2);border-radius:0}
        .code1{display:flex;flex-direction:row;justify-content:space-between;width:100%;height:70px;background:0 0;padding-top:30px;margin-top:-30px;font-size:16px;border-bottom:1px solid rgba(0,0,0,.2);border-radius:0}
        #code1{width:calc(100% - 90px);height:55px;background:0 0;padding-top:20px;border:0;outline:0;margin-top:-20px;font-size:16px}
        #btnSendCode{width:90px;height:30px;padding:0 5px;margin:0;font-size:14px;background:0 0;border-radius:30px;color:#a07941;border-color:#a07941;outline:0}
        ::-webkit-input-placeholder{font-size:14px;color:rgba(0,0,0,.4)}
        :-moz-placeholder{font-size:14px;color:rgba(0,0,0,.4)}
        ::-moz-placeholder{font-size:14px;color:rgba(0,0,0,.4)}
        :-ms-input-placeholder{font-size:14px;color:rgba(0,0,0,.4)}
        .next{text-align:center;margin:20px 0}
        .next button{width:140px;height:40px;padding:0;margin:auto;background:#007bff;color:#fff;border:0;outline:0;border-radius:3px}
    </style>
</head>
<body>
<div class="modal_content">
    <h5>绑定手机号</h5>
    <div>
        <label for="phone1">注册手机号：</label><br />
        <input id="phone1" type="text" autocomplete="off" placeholder="请输入手机号"/>
    </div>
    <div>
        <label for="code1">验证码：</label>
        <div class="code1">
            <input id="code1" type="text" autocomplete="off" placeholder="短信验证码"/>
            <input id="btnSendCode" type="button" class="btn btn-default" value="获取验证码" onClick="sendMessage1()" />
        </div>
    </div>
    <div class="next">
        <button onClick="binding()">确定</button>
    </div>
</div>
<script>
    var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;//手机号正则
    var count = 60; //间隔函数，1秒执行
    var InterValObj1; //timer变量，控制时间
    var curCount1;//当前剩余秒数
    /*判断输入的手机号*/
    function sendMessage1() {
        curCount1 = count;
        var phone = $.trim($('#phone1').val());
        if (!phoneReg.test(phone)) {
            alert(" 请输入有效的手机号码");
            return false;
        }
        //设置button效果，开始计时
        $("#btnSendCode").attr("disabled", "true");
        $("#btnSendCode").val( + curCount1 + "秒再获取");
        InterValObj1 = window.setInterval(SetRemainTime1, 1000); //启动计时器，1秒执行一次
        //向后台发送处理数据

    }

    function SetRemainTime1() {
        if (curCount1 == 0) {
            window.clearInterval(InterValObj1);//停止计时器
            $("#btnSendCode").removeAttr("disabled");//启用按钮
            $("#btnSendCode").val("重新发送");
        }
        else {
            curCount1--;
            $("#btnSendCode").val( + curCount1 + "秒再获取");
        }
    }

    /*提交*/
    function binding(){
        alert('请输入验证码!')
    }

</script>
</body>
</html>
